<template>
    <div class="stat-admin-container">
        <el-card>
            <h2>统计数据管理</h2>
            <el-form :inline="true" class="stat-form">
                <el-form-item label="统计类型">
                    <el-select v-model="type" placeholder="请选择类型" style="width: 160px">
                        <el-option label="注册用户数" value="register_num" />
                        <el-option label="登录数" value="login_num" />
                        <el-option label="发帖数" value="post_num" />
                        <el-option label="访问量" value="view_num" />
                    </el-select>
                </el-form-item>
                <el-form-item label="起始日期">
                    <el-date-picker v-model="begin" type="date" placeholder="开始日期" />
                </el-form-item>
                <el-form-item label="结束日期">
                    <el-date-picker v-model="end" type="date" placeholder="结束日期" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onQuery">查询</el-button>
                </el-form-item>
            </el-form>
            <div v-if="chartData.xData.length">
                <v-chart :option="chartOption" style="height: 400px; width: 100%;" />
            </div>
            <div v-else style="text-align:center;color:#888;margin-top:40px;">暂无数据</div>
        </el-card>
    </div>
</template>


<script setup>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'
import { use } from 'echarts/core'
import VChart from 'vue-echarts'
import { LineChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

use([LineChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer])

const type = ref('register_num')
const begin = ref('')
const end = ref('')
const chartData = ref({ xData: [], yData: [] })


const formatDate = (date) => {
    if (!date) return ''
    const d = new Date(date)
    const month = (d.getMonth() + 1).toString().padStart(2, '0')
    const day = d.getDate().toString().padStart(2, '0')
    return `${d.getFullYear()}-${month}-${day}`
}

const saveQueryToLocalStorage = () => {
    localStorage.setItem('homeChartType', type.value)
    localStorage.setItem('homeChartBegin', formatDate(begin.value))
    localStorage.setItem('homeChartEnd', formatDate(end.value))
}

const onQuery = async () => {
    saveQueryToLocalStorage()
    await fetchStats()
}

const fetchStats = async () => {
    if (!type.value || !begin.value || !end.value) {
        alert('请选择类型和时间区间')
        return
    }


    // 這裡格式化
    const beginStr = formatDate(begin.value)
    const endStr = formatDate(end.value)
    const res = await axios.get(`http://localhost:10010/staservice/daily/showData/${type.value}/${beginStr}/${endStr}`)
    if (res.data && res.data.success) {
        chartData.value = {
            xData: res.data.data.xlist || [],
            yData: res.data.data.ylist || []
        }
    }
}

const chartOption = computed(() => ({
    title: { text: '统计趋势图', left: 'center' },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: chartData.value.xData },
    yAxis: { type: 'value' },
    series: [
        {
            name: '数量',
            type: 'line',
            data: chartData.value.yData,
            smooth: true
        }
    ]
}))
</script>